<template>
    <div id="aCoursesList" class="bg-fa of">
        <!-- 讲师列表 开始 -->
        <section class="container">
            <header class="comm-title all-teacher-title">
                <h2 class="fl tac">
                    <span class="c-333">全部讲师</span>
                </h2>
                <section class="c-tab-title">
                    <a id="subjectAll" title="全部" href="#"></a>
                </section>
            </header>
            <section class="c-sort-box unBr">
                <div>
                    <el-input
                        placeholder="请输入你想搜的讲师"
                        prefix-icon="el-icon-search"
                        v-model="name"
                        clearable
                        @change="gotoPage(1)"
                        style="width:20%"
                    ></el-input>

                    <!-- /无数据提示 开始-->
                    <section class="no-data-wrap" v-if="total===0">
                        <em class="icon30 no-data-ico">&nbsp;</em>
                        <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
                    </section>
                    <!-- /无数据提示 结束-->
                    <article class="i-teacher-list">
                        <ul class="of">
                            <li v-for="teacher in teachers" :key="teacher.id">
                                <section class="i-teach-wrap">
                                    <div class="i-teach-pic">
                                        <a :href="'/teacher/'+teacher.id" :title="teacher.name">
                                            <img :src="teacher.avatar" alt />
                                        </a>
                                    </div>
                                    <div class="mt10 hLh30 txtOf tac">
                                        <a
                                            :href="'/teacher/'+teacher.id"
                                            :title="teacher.name"
                                            class="fsize18 c-666"
                                        >{{teacher.name}}</a>
                                    </div>
                                    <div class="hLh30 txtOf tac">
                                        <span class="fsize14 c-999" v-html="teacher.intro"></span>
                                    </div>
                                    <div class="mt15 i-q-txt">
                                        <p class="c-999 f-fA">{{teacher.career}}</p>
                                    </div>
                                </section>
                            </li>
                        </ul>
                        <div class="clear"></div>
                    </article>
                </div>
                <!-- 公共分页 开始 -->
                <div>
                    <div class="paging">
                        <el-pagination
                            background
                            layout="total, prev, pager, next"
                            :total="total"
                            :page-size="8"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                        <div class="clear"></div>
                    </div>
                </div>
                <!-- 公共分页 结束 -->
            </section>
        </section>
        <!-- /讲师列表 结束 -->
    </div>
</template>
<script>
import { pageTeacher } from "@/api/ucenter/teacher";
export default {
    data() {
        return {
            name: "",
            teachers: [],
            current: 1,
            total: 0,
        };
    },
    computed: {},
    methods: {
        gotoPage(page) {
            pageTeacher({ name: this.name }, page, 8).then((response) => {
                this.teachers = response.data.teachers;
                this.total = response.data.rows;
                this.current = page;
            });
        },
        handleCurrentChange(val) {
            this.gotoPage(val);
        },
    },
    created() {
        this.gotoPage(1);
    },
};
</script>
<style scope>
</style>